<template>
  <el-main style="padding: 0 20px">
    <el-descriptions
      :column="1"
      border
      size="small"
    >
      <el-descriptions-item label="请求接口">
        {{ data.url }}
      </el-descriptions-item>
      <el-descriptions-item label="请求方法">
        {{ data.type }}
      </el-descriptions-item>
      <el-descriptions-item label="状态代码">
        {{ data.code }}
      </el-descriptions-item>
      <el-descriptions-item label="日志名">
        {{ data.name }}
      </el-descriptions-item>
      <el-descriptions-item label="日志时间">
        {{ data.time }}
      </el-descriptions-item>
    </el-descriptions>
    <el-collapse
      v-model="activeNames"
      style="margin-top: 20px"
    >
      <el-collapse-item
        title="常规"
        name="1"
      >
        <el-alert
          title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。"
          :type="typeMap[data.level]"
          :closable="false"
        />
      </el-collapse-item>
      <el-collapse-item
        title="详细"
        name="2"
      >
        <div class="code">
          Request: { User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64)
          AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198
          Safari/537.36" }, Response: { Content-Type: "application/json;
          charset=utf-8", Date: "Fri, 25 Jun 2021 03:02:14 GMT", Server:
          "nginx/1.17.8" }
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      data: {},
      activeNames: ["1"],
      typeMap: {
        info: "info",
        warn: "warning",
        error: "error",
      },
    };
  },
  methods: {
    setData(data) {
      this.data = data;
    },
  },
};
</script>

<style scoped>
.code {
  background: #848484;
  padding: 15px;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
}
</style>
